<template>
  <div class="orderdetail">
      <Vheader title="订单详情"></Vheader>
      <div class="play">
        
      </div>
      <div class="list-wrapper" ref="orderdetailWrapper">
        <div class="list-container">
          <section class="address">
            <div class="address_con flex_style">
              <span class="iconfont icon-weizhi" style="line-height: 60px;font-size:24px;width: 10vw;">
                
              </span>
              <span style="width: 70vw">
                <p><span>收货人: {{address.userName}}</span><span>电话: {{address.mobile}}</span></p>
                <p>收货地址: {{regions.provincename}} {{regions.cityname}} {{regions.name}} {{address.address}}</p>
              </span>
              <span class="iconfont icon-right" style="line-height: 60px;width: 10vw;text-align: center;">
                  
              </span>
            </div>
          </section>
          <section class="boxdetail">
            <ul class="main">
              <li class="goods_img">
                <img :src="productInfo.images" alt="">
              </li>
              <li class="goods_con">
                <p class="title">{{productInfo.productName}}</p>
                <p class="leval"><span v-for="attr in productInfo.attributes">{{attr}}</span></p>
                <p class="price_num"><span class="price">￥{{list.amount}}</span><span class="num">×{{list.count}}</span></p>
              </li>
            </ul>
            <p class="flex_style" style="margin-top: 6px;"><span>运输方式</span><span>快递</span></p>
            <p class="flex_style"><span>运费</span><span :class="{ priceStyle: fee != 0}">{{fee}}</span></p>
            <p class="flex_style"><span>优惠券</span><span :class="{ priceStyle: money != 0}">{{money}}</span></p>
            <p class="flex_style"><span>余额抵扣</span><span :class="{ priceStyle: showdiscount != 0}">{{showdiscount}}</span></p>
            <p class="flex_style"><span>实付款</span><span class="priceStyle">{{list.amount}}</span></p>
          </section>
          <section class="ordermessage">
          	<p><span>订单编号:</span><span>{{list.finishedNo}}</span></p>
          	<p><span>创建时间:</span><span>{{list.createTime}}</span></p>
          	<p><span>订单状态:</span><span style="color: red;">{{list.status | record}}</span></p>
          </section>
          <section class="message">
          	<textarea></textarea>
          </section>
          <section class="kong">
          	
          </section>

        </div>
      </div>
      <ul class="footerNav">
      	<span class="order-btn" @click="cancel(list.orderNo)" v-if="list.status == 1">取消订单</span>
        <span class="order-btn" @click="nowPay(list.orderNo)" v-if="list.status == 1">立即付款</span>
        <span class="order-btn" @click="backMoney(list)" v-if="list.status == 2">申请退款</span>
        <span class="order-btn" @click="fast(list.orderNo)" v-if="list.status == 2">提醒发货</span>
        <span class="order-btn" @click="seewl(list)" v-if="list.status == 4 || list.status == 5">查看物流</span>
        <span class="order-btn" @click="backGoods(list)" v-if="list.status == 4 || list.status == 5">申请退货</span>
        <span class="order-btn" @click="okgoods(list.orderNo)" v-if="list.status == 4">确认收货</span>
        <span class="order-btn" @click="cancel(list.orderNo)" v-if="list.status == 5">删除订单</span>
      </ul>
  </div>
</template>

<script>
import Vheader from '../../components/header.vue'
import axios from '../../axios/axios'
import vFooter from '@/components/footer'
import BScroll from 'better-scroll';
export default {
  name: 'cart',
  data () {
    return {
      list:[],
      fee:0,
      money:"",
      showdiscount:0,
      id:'',
      address:{},
      regions:{},
      productInfo:{},
    }
  },
  components: {
    vFooter,
    Vheader,
  },
  mounted: function(){
    var  that=this;
    var id = that.$route.query.id;
    console.log(that.id)
    var data = JSON.stringify({
     	"actionName": "findById",
		"admin": true,
		"controllerName": "orderInfo",
		"data": [id]
    });
    axios.post({
      data: data,
      callback(res) {
        console.log(res.data.data.data)
        that.address=res.data.data.data.address
        that.regions=res.data.data.data.address.regions
        that.list = res.data.data.data
        that.productInfo=res.data.data.data.productInfo
        that.showdiscount=that.list.backAmount + that.list.commissionAmount + that.list.signAmount
        if(res.data.data.data.productInfo.userDiscount){
        	that.money=res.data.data.data.productInfo.userDiscount.price
        }else{
        	that.money="未使用"
        }
        
        that.$nextTick(()=>{
	      that._initScroll();
	    })
      }
    })

    
  },
  methods:{
    _initScroll: function () {
        if(!this.orderdetailScroll){
          this.orderdetailScroll = new BScroll(this.$refs.orderdetailWrapper, {
            click: true,
          })
        }else{
          this.scroll.refresh();
        }
      },
    cancel: function(id){
        console.log(id);
        $('.aaa').html(this.p)
        var that=this;
         var data = JSON.stringify({
          "actionName": "cancelOrder",
          "controllerName": "orderInfo",
          "data": [{
            "orderInfoList": [{
              "orderNo": id
            }]
          }]
        });
        axios.post({
          data: data,
          callback(res) {
            console.log(res.data)
          }
        })
      },
      nowPay: function(id){
        console.log(id);
        var that=this;
         var data = JSON.stringify({
          "actionName": "againOrder",
          "controllerName": "orderPay",
          "data": [{
            "orderInfoList": [{
              "orderNo": id
            }],
            "paySource": "wap",
            "payType": "alipay"
          }]
        });
        axios.post({
          data: data,
          callback(res) {
            console.log(res.data)
            $('.play').html(res.data.data.order)
          }
        })
      },
      backMoney: function(goods){
        // console.log(goods)
        sessionStorage.setItem('backMessage',JSON.stringify(goods));
        this.$router.push('/backAmount');
      },
      fast: function(id){
        alert('提醒发货')
      },
      seewl: function(id){
        alert('查看物流')
      },
      okgoods: function(id){
        var data = JSON.stringify({
          "actionName": "confirmGetGoods",
          "controllerName": "orderInfo",
          "data": [id]
        });
        axios.post({
          data: data,
          callback(res) {
            console.log(res.data)
          }
        })
      },
      backGoods: function(goods){
      	sessionStorage.setItem('backGoods',JSON.stringify(goods));
        this.$router.push('/backGoods');
      }
  },
  computed:{
    
  },
  filters: {
      record: function (type) {
        var state={1:'待支付',2:'待发货',4:'待收货',5:'待评价',6:'完成',7:'取消订单',33:'退款待审核',34:'退款审核失败',38:'退款审核中',39:'退款完成',45:'退货待审核',46:'退货审核中',47:'退款中',48:'退货完成',49:'退货完成',50:'退货失败',84:'删除订单'}
        return state[type]
      }
    },
}
</script>
<style lang="scss" scoped>
@import "../../common/style/public";
.orderdetail{
  .list-wrapper {
    width: 100%;
    height: calc(100% - 89px);
    position: absolute;
    top: 40px;
    bottom: 49px;
    overflow: hidden;
    margin-bottom: 49px;
    .list-container {
      width: 100%;
      .address{
          width: 92vw;padding: 4vw;background-color: #fff;margin-top:6px;color:#000;font-size: 14px;
          .flex_style{

          }
          .address_con{
              p{
                height:24px;line-height: 24px;
                span{
                  margin-right: 26px;
                }
              }
          }
        }
        .boxdetail{
            background-color: #f5f5f5;
            .main{
              margin-top: 6px;
              background-color: #fff;display: flex;justify-content: space-between;
              height: 30vw;padding: 2vw 2vw;
              .goods_img{
                width: 30vw;height:30vw;
                img{
                  width: 100%;height:100%;
                }
              }
              .goods_con{
                width: 62vw;height: 100%;padding: 0 1vw;
                .title{
                  font-size: 14px;
                  width:100%;
                  overflow : hidden;
                  text-overflow: ellipsis;
                  display: -webkit-box;
                  -webkit-line-clamp:2;
                  -webkit-box-orient: vertical;
                  margin-top: 6px;
                }
                .leval{
                  font-size: 14px;color: gray;height: 12vw;line-height: 12vw;
                }
                .price_num{
                  display: flex;justify-content: space-between;
                  .price{color: red;}
                }
                .num{color: gray;font-size: 14px;margin-right: 8px;}
              }
            }
            .flex_style{
              background-color: #fff;margin-bottom: 1px;height:10vw;line-height: 10vw;padding: 0 4vw;color: gray;
            }
            p{
              .priceStyle{
                  color: red;
                }
            }
        }
        .ordermessage{
        	margin-top: 6px;background-color: #fff;padding: 4vw 4vw;color: gray;font-size: 12px;
        	p{
        		height: 26px;line-height: 26x;
        		span{
        			margin-right: 6px;
        		}
        	}
        }
        .message{
        	padding: 6vw;
        	textarea{
        		border-radius: 6px;background-color: #fff;width: 86vw;height: 30vw;outline: none;
        	}
        }
        .kong{
        	height: 10px;
        }
    }
  }
  .footerNav{
  	height: 49px;border-top: 1px solid #e3e3e3;position: fixed;bottom: 0;left: 0;background-color: #fff;width: 100%;
	  width: 100%;
	  height: 50px;
	  background-color: #FFFFFF;
	  padding: 11.5px 10px;
	  text-align: right;
	  box-sizing: border-box;
	  .order-btn{
	    padding: 3px 6px;
	    border-radius: 20px;
	    border: solid 1px #c36a68;
	    margin-left: 10px;
	  }
	}
}
</style>
